<template>
   <div class="fix-page">
     <div class="place">
       <headerNav :isShowBack="true" title="选择门店"></headerNav>
       <div class="place-header">
         <div
                 class="selectShop"
                 :class="shop_active === 0 ? 'shop-active' : ''"
                 @click="changeTab(0)"
         >
           选择门店
         </div>
         <div
                 class="commonShop"
                 :class="shop_active === 1 ? 'shop-active' : ''"
                 @click="changeTab(1)"
         >
           常用/收藏
         </div>
       </div>
       <!-- 选择门店区域 -->
       <div v-if="shop_active === 0" class="shop-content">
         <div class="content-header">
           <div class="city-district">
             全部城区
             <a href="#" class="next"> &gt;</a>
           </div>
         </div>
         <div class="content-middle" v-if="show" >
           <img  src="../../assets/img/place/map.png" />
         </div>
         <div class="content-bottom">
           <div class="bottom-header" id="mapup" @click="isShow()">
             收起地图
             <span class="up" :class="{'changeup':up}" @click="up = !up">&lt;</span>
           </div>
           <ul >
             <li v-for="(item,index) in list" :key="item.index">
               <div class="list1"  @click="check(index)" :class="showDown === index ? 'listC' : ''">
                 <div class="list1-left"  >
                   <h5>{{item.name}}</h5>
                   <span class="s1">{{item.make}}</span> &nbsp;&nbsp;
                   <span class="s2">{{item.state}}</span>
                   <div>
                     {{item.address}}
                   </div>
                   <p class="time">{{item.time}}</p>
                 </div>
                 <div class="list1-right">
                   <p>去下单</p>
                   <p class="p2">距离5.4km</p>
                 </div>
               </div>
             </li>
           </ul>
         </div>
       </div>

       <div v-if="shop_active === 1" class="common-content">
         <div class="content">
           <img src="../../assets/img/place/starbox.png" />
           <p>暂无常用及收藏门店</p>
         </div>
       </div>

       <br/>
       <br/>
       <br/>
     </div>
   </div>
</template>

<script>
  import headerNav from 'components/HeaderNav/headerNav'
export default {
  name: "place",
  // el:"mapup"
  data() {
    return {
      show:true,
      up:false,
      shop_active: 0,
      showDown:undefined,
      list:[
        {
          name:'美年广场GO店',
          make:'9单/23杯制作中',
          state:'可外送',
          address:'高新区天府大道中段1388号“红糖”14栋1层3号（L105号）号商铺',
          time:'10:00-22:00'
        },
        {
          name:'美年广场GO店',
          make:'9单/23杯制作中',
          state:'可外送',
          address:'高新区天府大道中段1388号“红糖”14栋1层3号（L105号）号商铺',
          time:'10:00-22:00'
        },
        {
          name:'美年广场GO店',
          make:'9单/23杯制作中',
          state:'可外送',
          address:'高新区天府大道中段1388号“红糖”14栋1层3号（L105号）号商铺',
          time:'10:00-22:00'          
        }
      ]
    };
  },
  components:{
    headerNav
  },
  methods: {
    back(){
      this.$router.back()
    },
    changeTab(index) {
      console.log(index);
      this.shop_active = index;
    },
    isShow(){
      this.show = !this.show;
    },
    check(index){
      this.showDown = index;
    }
  },
};
</script>


<style scoped>
  .fix-page{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 777;
  }
  .fix-page .place{
    overflow: auto;
  }
.common-content{
  display: flex;
  background: #f5f5f5;
}

.common-content .content {
  margin:auto;
}
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?i5yd8d");
  src: url("fonts/icomoon.eot?i5yd8d#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?i5yd8d") format("truetype"),
    url("fonts/icomoon.woff?i5yd8d") format("woff"),
    url("fonts/icomoon.svg?i5yd8d#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.list1-left{
  width:  70%;
}
.list1-left div{
  font-family: "icomoon";
  font-size: 2px;
  margin: 5px auto 10px;
}
.list1-left p{
  font-family: "icomoon";
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-bottom {
  position: relative;
  /* top: 1px; */
}
.bottom-header {
  text-align: center;
  height: 30px;
  background-color: #fff;
  line-height: 30px;
  box-sizing: border-box;
  font-size: 12px;
  color:rgb(51, 51, 51);
}
.shop-active{
  border-bottom: 8px solid lightsalmon;
}
.bottom-header .up {
  -webkit-transform: rotate(90deg);
  display: inline-block;
}

.bottom-header .changeup {
  -webkit-transform: rotate(270deg);
  display: inline-block;
}
.content-bottom li {
  margin: 15px 10px;
  background-color: #fff;
  list-style: none;
}

.list1 {
  border: 2px solid #fff;
  height: 120px;
}
.listC{
  border:2px solid orange;
}
.list1-left {
  float: left;
  margin: 10px;
  border-right: 2px solid silver;
  padding-right: 10px;
}
.list1-left .s1 {
  font-size: 8px;
}
.list1-left .s2 {
  font-size: 10px;
}

.list1-right {
  margin: 40px 10px 40px 250px;
  text-align: center;
}
.list1-right .p2 {
  font-size: 8px;
  margin-top: 5px;
}

.place-header {
  height: 30px;
}
.bottom-header {
  position: relative;
}

.shop-content{
  overflow: hidden;
}
.common-content {
  background-color: #f5f5f5;
}

.place {
  background-color: #f5f5f5;
  height: 100%;
}
.place-header {
  display: flex;
  height: 60px;
  background-color: #fff;
}
.place-header div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shop-content .content-header {
  background-color: #fff;
}

.city-district{
  margin-left: 15px;
  font-size: 12px;
  text-align: left;
  line-height: 2;
  color:rgb(51, 51, 51);
  box-sizing: border-box;
}

.city-district .next {
  width: 14px;
  height: 14px;
  font-size: 14px;
  line-height: 14px;  
  color: rgb(215,215,215);
  opacity: 1;
  font-family: lightIconFont;

}

.order-active {
  color: orange;
  border-bottom: 5px solid orange;
}
.order-content {
  height: 250px;
  margin-top: 20px;
  background-color: #fff;
}
.history-content {
  height: 250px;
  margin-top: 20px;
  background-color: #fff;
}
.content-header {
  height: 30px;
}
.content-header .header-left {
  margin-top: 30px;
  margin-left: 10px;
  float: left;
}
.content-header .header-right {
  margin-top: 30px;
  margin-right: 10px;
  float: right;
}
.content-header .header-left .title {
  font-size: 16px;
  color: #333333;
}
.content-header .header-left .time {
  color: #999999;
}
.content-header .header-right .complete {
  color: #999999;
}

.content-middle {
  width:260px;
  /* height: 250px; */
  display: block;
}
.content-middle .img{
  width: 95%;
  /* height: 100%; */
  background-size:cover;
}
.content-middle::after{
  content: " ";
  display: table;
  clear: both;
}
.content-btn {
  height: 30px;
  display: flex;
  margin-left: 180px;
}
.content-btn .invoice {
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
  border: 1px solid skyblue;
  margin-right: 10px;
  margin-top: 20px;
}
.content-btn .again {
  text-align: center;
  line-height: 30px;
  width: 100px;
  height: 30px;
  border: 1px solid orange;
  color: orange;
  margin-top: 20px;
}
.history-content .content-btn {
  margin-left: 290px;
}
.footer {
  text-align: center;
  height: 310px;
  margin-top: 20px;
}
</style>